<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">
    <link href="css/kind.css" rel="stylesheet">

</head>
<body>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/head.js"></script>
    <script src="js/upload.js"></script>

    <script src="js/Utils.js"></script>

    <script src="js/mock.js"></script>
    <script src="js/mock/kind.js"></script>

    <div class="head"></div>
    
    <div class="uploadBox" style="width: 150px;height:150px;margin:auto;">
        <div class="image" style="width: 150px;height:150px;position:relative">
            <div class="shade" style="background-color: rgb(0, 0, 0,0.5); position: absolute; top:0;width: 100%;height: 100%;border-radius: 50%;color:white;display:flex;justify-content: center;align-items: center;">
                点击更换图片
            </div>
        </div>
    </div>

    <div style="width:50%;margin:auto;;margin-top:20px;text-align: center;display: flex; justify-content: space-between;align-items: center;">
        <span>宠物类型:</span>
        <input type="text" style="width: 80%" id="type">
    </div>
    <div class="button" id="changeInfo" style="margin:auto;margin-top:20px;width: 50%;">修改</div>


    <script>


        $('document').ready(function(){
            let parameter = getURIParameter()

            let id = parameter.id

            $.ajax({
                url:baseUrl + 'get_type.php?id='+id,
                
                type: 'GET',
                success:function(res){
                    if(typeof(res) == 'string')
                        res = JSON.parse(res)
                    
                    if(res.code == 200){
                        render(res.data)

                        initEvent()

                    }else{

                    }
                }
            })

            function render(data){
                $('.uploadBox .image').append(`
                    <img src="${baseUrl + data.image}" style="width:100%;height:100%;border-radius: 50%;">
                `)

                $('.shade').hide()

                $('.uploadBox').hover(function(){
                    console.log("hhhh")
                    $('.shade').show()
                },function(){
                    $('.shade').hide()

                })

                $('#type').val(data.type)
            }

            function initEvent(){

                changeImageEvent()
                changeInfoEvent()
            }

            function changeImageEvent(){
                $('.uploadBox #upload').change(function(event){
                    let file = event.target.files[0]

                    let formData = new FormData()

                    formData.append('file', file)
                    formData.append('id', id)

                    let imgUrl

                    let upload = $.ajax({
                        data: formData,
                        url:baseUrl +'upload.php',
                        type: 'POST',
                        contentType: false,
                        processData : false
                    })

                    let changeImg = function(imgUrl){
                        let data = {
                            id,
                            'image':imgUrl
                        }

                        data = JSON.stringify(data)

                        return $.ajax({
                            data,
                            url: baseUrl + 'change_type_image.php',
                            type: 'POST',
    
                        })
                    }

                    upload.then(res => {
                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            imgUrl = res.data.imgUrl
                            return changeImg(res.data.imgUrl)
                        }else
                            alert(res.msg)

                    }).then(res => {
                        if(!res)
                            alert("上传失败")

                        if(typeof(res) == 'string')
                            res = JSON.parse(res)

                        if(res.code == 200){
                            alert(res.msg)
                            $('.image img').attr('src', baseUrl + imgUrl)
                        }else
                            alert(res.msg)
                            
                    })
                })
            }

            function changeInfoEvent(){
                
                $('#changeInfo').click(function(){

                    let type = $('#type').val()

                    let data = {
                        id,
                        type
                    }

                    data = JSON.stringify(data)

                    $.ajax({
                        data,
                        url : baseUrl + 'change_type_info.php',
                        type : 'POST',
                        success : function(res){
                            if(typeof(res) == 'string')
                                res = JSON.parse(res)

                            if(res.code == 200){
                                alert(res.msg)
                            }

                            else
                                alert(res.msg)
                        }
                    })
                })
            }
        })
    </script>
</body>
</html>